import React, {useMemo} from 'react'
import InputVertical from '../../../ui/form/input/InputVertical'
import {Button} from '../../../ui/button/Button'
import Header from '../../components/common/Header'
import {Footer} from '../../components/common/Footer'
import {Container} from '../../../ui/layout/Container'
import Alert from '../../../ui/form/Alert'
import {ButtonLink} from '../../../ui/button/ButtonLink'
import {CONSTANTS} from '../../../../constants'
import {UserPasswordDto} from '../../../../api/UserPasswordDto'

interface SingInComponentProps {
  userPassword: UserPasswordDto
  handleChangeUserPasswordProps: (key: string, value: string) => void
  isSubmitDisabled: boolean
  onLogin: () => Promise<void>
  errorMessage: string
}

const SingInComponent: React.FC<SingInComponentProps> = ({
  userPassword,
  handleChangeUserPasswordProps,
  isSubmitDisabled,
  onLogin,
  errorMessage,
}): React.ReactElement => {
  const renderContent: React.ReactElement = useMemo(() => {
    return (
      <div className={'sing-in'}>
        <div>
          <h1>Вход</h1>
        </div>
        <div className={'sing-in-form'}>
          <InputVertical
            id={'auth-form-login'}
            name={'login'}
            type={'text'}
            label={'Логин'}
            value={userPassword.login}
            isRequired={true}
            className={'w-100 mb-x4'}
            onChange={(value: string): void => {
              handleChangeUserPasswordProps('login', value)
            }}
          />
          <InputVertical
            id={'auth-form-password'}
            name={'password'}
            type={'password'}
            label={'Пароль'}
            value={userPassword.password}
            className={'w-100 ' + (errorMessage ? 'mb-x4' : 'mb-x6')}
            isRequired={true}
            onChange={(value: string): void => {
              handleChangeUserPasswordProps('password', value)
            }}
          />
          {errorMessage && <Alert message={errorMessage} color={'danger'} className={'mb-x6'} />}
          <div className={'d-flex flex-row justify-content-between'}>
            <ButtonLink
              href={CONSTANTS.webUrl + '/auth/singup'}
              style={'outline'}
              size={'sm'}
              className={'mb-0 mr-x4'}>
              Регистрация
            </ButtonLink>
            <Button
              type={'button'}
              disabled={isSubmitDisabled}
              onClick={async (): Promise<void> => {
                await onLogin()
              }}
              size={'sm'}
              className={'mb-0'}>
              Войти
            </Button>
          </div>
        </div>
      </div>
    )
  }, [
    handleChangeUserPasswordProps,
    isSubmitDisabled,
    onLogin,
    userPassword.login,
    userPassword.password,
    errorMessage,
  ])

  return (
    <div className={'content'}>
      <Header />
      <Container className={'content-body'}>{renderContent}</Container>
      <Footer />
    </div>
  )
}

export {SingInComponent}
